import originAxios from 'axios'
import qs from 'qs'
import Vue from 'vue'
import {Loading} from "element-ui";

export default function request(option) {
    return new Promise((resolve, reject) => {
        // 1.创建axios的实例
        const instance = originAxios.create({
            baseURL: process.env.VUE_APP_SERVER,
            timeout: 5000,
            method: 'POST',
            withCredentials: true    //带上cookie
        });

        let loadingInstance

        // 配置请求和响应拦截
        instance.interceptors.request.use(config => {
            // console.log('来到了request拦截success中');
            // 1.当发送网络请求时, 在页面中添加一个loading组件, 作为动画
            loadingInstance = Loading.service({
                fullscreen: true,
                spinner: 'el-icon-loading',
                text: '数据加载中',
                background: 'rgba(0, 0, 0, 0.7)',
                lock: true,
            });
            // 2.某些请求要求用户必须登录, 判断用户是否有token, 如果没有token跳转到login页面

            // 3.对请求的参数进行序列化(看服务器是否需要序列化)
            // config.data = qs.stringify(config.data)
            // console.log(config);

            // 4.等等
            return config
        }, err => {
            // console.log('来到了request拦截failure中');
            return err
        })

        instance.interceptors.response.use(response => {
            // console.log('来到了response拦截success中');
            let headers = JSON.stringify(response.headers);
            console.log("cookie" + document.cookie)
            return response.data
        }, err => {
            console.log('来到了response拦截failure中');
            console.log(err);
            if (err && err.response) {
                switch (err.response.status) {
                    case 400:
                        err.message = '请求错误';
                        break;
                    case 401:
                        err.message = '未授权的访问';
                        break;
                }
            }
            return err
        });

        // 2.传入对象进行网络请求
        instance(option).then(res => {
            loadingInstance.close();
            if (res.status === 200) {
                resolve(res)
            } else {
                Vue.prototype.$message({
                    type: "error",
                    message: res.message
                });
                reject(res.status);
            }
        }).catch(err => {
            reject(err)
        })
    })
}
